<template>
  <div class="flex flex-col rounded-lg shadow-2xl">
    <!--图片 -->
    <div class="flex rounded-t-lg w-full">
      <img
        class="w-full h-64 rounded-t-lg shadow-2xl"
        src="https://isujin.com/wp-content/themes/Diaspora/timthumb/timthumb.php?src=https://isujin.com/wp-content/uploads/2018/03/wallhaven-630537.jpg"
      />
    </div>
    <div class="flex flex-col w-full mx-6">
    <!-- 分类 -->
    <div class="flex flex-row w-full mt-4">
      <button class="ring-1 bg-indigo-600 rounded-lg px-3 py-1 text-white">Java</button>
    </div>
    <!-- 标题 -->
    <div class="flex flex-row w-full mt-5">
      <div class="text-2xl subpixel-antialiased font-semibold">Hello</div>
    </div>
    <!-- 作者 -->
    <div class="flex flex-row w-full mt-3">
      <p class="text-gray-400">Hello</p>
    </div>
    <!-- 内容 -->
    <div class="flex flex-row w-10/12 mt-6">
      <div class="text-gray-500 ">Hello 欢迎来到这里,你将在这里遇到最美的自己,很nice哦</div>
    </div>
    </div>

    <!-- 点赞评论等等 -->
    <div class="flex flex-row justify-between w-full mt-8 border-t-2 px-8">
      <div class="flex flex-row justify-between w-full my-6">
        <div>1</div>
        <div>1</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AboutComponents",
};
</script>

<style scoped>
</style>